import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Row, Col, Input } from 'antd';
import Area from '../../../components/Area';

const FormItem = Form.Item;

class BasicForm extends React.Component {
  componentDidMount() {}

  // 地区
  getData = (value, id) => {
    const { form } = this.props;
    const tempAreaId = value.key;
    if (id) {
      form.setFieldsValue({ [id]: { key: tempAreaId } });
      this.setState({ [id]: tempAreaId });
    }
  };

  render() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    // 表单布局
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };
    return (
      <Card
        title={<span style={{ fontWeight: 'bolder' }}>供应商基本信息</span>}
        bordered={false}
        style={{ marginBottom: 24 }}
      >
        <Form layout="vertical">
          <Row gutter={64}>
            <Col {...colProps}>
              <FormItem label="供应商名称">
                {getFieldDecorator('name', {
                  rules: [{ required: true, message: '请输入' }],
                })(<Input placeholder="请输入" type="text" maxLength="100" />)}
              </FormItem>
            </Col>
            <Col {...colProps}>
              <FormItem label="统一社会信用代码">
                {getFieldDecorator('uniCreditCode', {
                  rules: [
                    {
                      required: true,
                      message: '长度为18位的数字与字母组合',
                      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{18}$/,
                    },
                  ],
                })(<Input placeholder="请输入" />)}
              </FormItem>
            </Col>
            <Col {...colProps}>
              <FormItem label="地区">
                {getFieldDecorator('areaId', {
                  rules: [{ required: true, message: '请选择' }],
                })(
                  <Area
                    labelInValue
                    maxLength="12"
                    onChange={value => this.getData(value, 'areaId')}
                  />
                )}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={64}>
            <Col {...colProps}>
              <FormItem label="办公地址">
                {getFieldDecorator('officeAddr', {
                  rules: [{ message: '请输入' }],
                })(<Input placeholder="请输入" maxLength="100" />)}
              </FormItem>
            </Col>
            <Col {...colProps}>
              <FormItem label="联系电话">
                {getFieldDecorator('tel', {
                  rules: [
                    {
                      message: '请正确输入手机号码或固话(最大限制12位)',
                      pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,12}$/,
                    },
                  ],
                })(<Input placeholder="请输入" maxLength="12" />)}
              </FormItem>
            </Col>
            <Col {...colProps}>
              <FormItem label="工作邮箱">
                {getFieldDecorator('email', {
                  rules: [{ type: 'email', message: '应为邮箱格式' }],
                })(<Input placeholder="请输入" maxLength="50" />)}
              </FormItem>
            </Col>
          </Row>
          <Row gutter={64}>
            <Col {...colProps}>
              <FormItem label="备注">
                {getFieldDecorator('remark', {})(<Input placeholder="请输入" maxLength="200" />)}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Card>
    );
  }
}
const BasicFormList = Form.create()(BasicForm);
export default BasicFormList;
